<script setup>
import {onMounted, ref} from 'vue';
import { showDialog } from 'vant';
import {get,post} from "../util/request.js";
import {useStore} from "../pinia/index.js";

const store=useStore()

const vips=ref([
  {name:"年卡会员",msg:"1.专属会员价 2.成长值双倍 3.一对一客服",price:365},
  {name:"银卡会员",msg:"1.会员价9.9折 2.成长值3倍 3.一对一客服",price:1000},
  {name:"金卡会员",msg:"1.会员价9折 2.成长值3倍 3.一对一客服 4.老邢疗养院3天体验券",price:10000},
  {name:"铂金会员",msg:"1.会员价9折 2.成长值3倍 3.一对一客服 4.老邢疗养院7天体验券",price:30000},
  {name:"钻石会员",msg:"1.会员价8折 2.成长值3倍 3.一对一客服 4.老邢疗养院7天体验券 5.专属一对一医生",price:60000},
  {name:"黑卡会员",msg:"1.会员价8折 2.成长值3倍 3.一对一客服 4.老邢疗养院15天体验券 5.专属一对一医生",price:100000},
])

const showPay=ref(false)
const order=ref({});
const showvip = (name,i) => {
  showDialog({
    title: name,
    message: vips.value[i].msg,
    theme: 'round-button',
  }).then(() => {
    //如果是年卡、银卡、金卡 立即开通
    if(i<=2){
      showPay.value=true;
      order.value.vipType=i+1;
      order.value.payType="2";
      order.value.userId=store.user.id
      order.value.money=vips.value[i].price;

    }else {
      //否则 跳转客服联系

    }
  });
}
const addPay = () => {
  console.log(order.value);
  //开通 VIP Axios 请求 接口
  post("/uservip/save",order.value).then(r=>{
    if(r.code==0){
      //成功 支付信息
      document.write(r.data);
    }
  })

}
const vip=ref({})
const lbname=ref("开通会员");
const vipname=ref("普通会员");
const vipmsg=ref("开通会员享受更多的优惠福利");
onMounted(()=>{
  //请求 用户的vip信息
  get("/uservip/my").then(r=>{
    if(r.code==0){
      vip.value=r.data;
      lbname.value="你成为VIP:"+vip.value.days+"天";
      vipname.value=vips.value[vip.value.type-1].name;
      vipmsg.value="有效期："+vip.value.sdate+"至"+vip.value.edate
    }else {
      lbname.value="开通VIP"
    }
  })
})
const back = () => {
  history.back();
}
</script>

<template>
  <van-nav-bar title="我的VIP会员" left-text="返回"
               left-arrow
               @click-left="back"/>
  <div>
    <div style="background-color: #888888;margin-bottom: 20px;margin-left: 5px;width: 90%;box-shadow: 5px 5px 3px gainsboro;padding: 10px;border-radius: 20px;color: white">
      <van-row>
        <van-col span="16">
          <van-row>
            <van-col span="24">
              <h2 style="border-bottom: 5px solid red;padding-bottom: 5px">{{lbname}}</h2>
            </van-col>
            <van-col span="24">
              <div style="color: yellowgreen;font-size: 12px">{{vipmsg}}</div>
            </van-col>
          </van-row>
        </van-col>
        <van-col span="8">
          <van-row>
            <van-col span="24">
              <div style="margin-top: 20px">当前：{{vipname}}</div>
            </van-col>
            <van-col span="24">

            </van-col>
          </van-row>
        </van-col>
      </van-row>
    </div>
    <div style="margin-top: 10%">
      <van-divider>点击会员图了解权益</van-divider>
    </div>
    <div class="dv2">
      <van-grid border="false" :gutter="20" column-num="3">
        <van-grid-item icon="photo-o" text="365元年卡会员" @click="showvip('年卡会员',0)"/>
        <van-grid-item icon="photo-o" text="1000元银卡会员" @click="showvip('银卡会员',1)"/>
        <van-grid-item icon="photo-o" text="10000元金卡会员" @click="showvip('金卡会员',2)"/>
        <van-grid-item icon="photo-o" text="30000元铂金会员" @click="showvip('铂金会员',3)"/>
        <van-grid-item icon="photo-o" text="60000元钻石会员" @click="showvip('钻石会员',4)"/>
        <van-grid-item icon="photo-o" text="100000元黑卡会员" @click="showvip('黑卡会员',5)"/>
      </van-grid>
    </div>
    <!-- 圆角弹窗（底部） -->
    <van-popup
        v-model:show="showPay"
        round
        closeable
        position="bottom"
        :style="{ height: '35%' }"
    >
      <template #default>
        <van-radio-group style="margin-top: 30px" v-model="order.payType">
          <van-cell-group inset>
            <van-cell icon="shop-o" title="钱包支付" clickable @click="order.payType = '1'">
              <template #right-icon>
                <van-radio name="1" />
              </template>
            </van-cell>
            <van-cell icon="shop-o" title="支付宝支付" clickable @click="order.payType = '2'">
              <template #right-icon>
                <van-radio name="2" />
              </template>
            </van-cell>
            <van-cell icon="shop-o" title="微信支付" clickable @click="order.payType = '3'">
              <template #right-icon>
                <van-radio name="3" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
        <div style="margin-top: 10px;margin-left: 5%;width: 90%">
          <van-button block round type="warn" @click="addPay">确认支付</van-button>
        </div>
      </template>
    </van-popup>

  </div>
</template>

<style scoped>
.dv2{
  margin-top: 15%;
  margin-left: 5%;
  width: 90%;
  box-shadow: 2px 2px 2px gainsboro;
  padding-bottom: 10%;
}
</style>
